<template>
  <div>
    <div>
      <van-search
        :value="course.title"
        input-align="center"
        placeholder="请输入标题"
        @change="e => course.title = e.mp.detail"
        @search="getCourseList">
      </van-search>
      <div v-for="(item,index) in courseList" :key="index" class="item">
        <div class="card-box" @click="getDetail(item.id)">
          <van-card
            :price="item.price"
            :tag="item.subjectTitle"
            :desc="item.description"
            :title="item.title"
            :thumb="item.cover"
            origin-price="999"
            lazy-load="true"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import request from '../../utils/request'

  export default {
    data() {
      return {
        courseList: [],
        course: {},
        limit: 10,
        total: 0
      }
    },

    created: function () {
      this.getCourseList()
    },

    methods: {
      async getCourseList() {
        let response = await request({
          url: `/course_service/course/getCourse/1/${this.limit}`,
          method: 'POST',
          data: this.course
        });


        this.course = {};
        this.courseList = response.data.rows;
        this.total = response.data.total;
      },
      async getDetail(id) {
        wx.navigateTo({
          url: `/pages/video/detail/main?id=${id}`
        })
      },
    },

    onReachBottom() {
      if (this.limit >= this.total) {
        //没有下一页了
        wx.showToast({
          title: '已到达底部'
        });
      } else {
        this.limit += 5;
        this.getCourseList()
      }
    },
  }
</script>

<style>
  .card-box {
    border-radius: 60rpx;
    box-shadow: 18rpx 18rpx 30rpx #d1d9e6, -18rpx -18rpx 30rpx #fff;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }
</style>
